<template>
  <div class="center">
    <!-- 头部 -->
    <div class="centerhead">
      <span>我的</span>
      <div class="centerright">
        <span class="iconfont icon-liuyanfill"></span>
        <span class="iconfont icon-shezhi"></span>
      </div>
    </div>
    <!-- 用户信息 -->
    <div class="userinfo">
      <div class="infotop">
        <div class="topl">
          <img  src="../../assets/img/user.jpg" alt="" />
          <span>左左左</span>
        </div>
        <div class="topr">
          <span class="iconfont icon-right_x"></span>
        </div>
      </div>

      <div class="infobottom">
        <div class="bottoml">
          <span>关注 <span class="num">1990</span> </span>
          <span>粉丝 <span class="num">1990</span></span>
        </div>
        <div class="bottomr">
          <span class="iconfont icon-VIP"></span>
        </div>
      </div>
    </div>
    <!-- 收藏分类 -->
    <div class="store">
      <div class="box">
        <!-- 喜欢 -->
        <div class="model" @click="$router.push('/love')">
          <img src="../../assets/img/ceshi.jpeg" alt="" />
          <div class="storebottom">
            <span class="iconfont icon-zanxinxingguanzhu"></span>
            <span>喜欢</span>
            <span>{{$store.state.lovelist.length}}</span>
          </div>
        </div>
        <!-- 历史 -->
        <div class="model" @click="$router.push('/history')">
          <img src="../../assets/img/gongqi.gif" alt="" />
          <div class="storebottom">
            <span class="iconfont icon-lishixiao"></span>
            <span>历史</span>
            <span>{{$store.state.historylist.length}}</span>
          </div>
        </div>
        <!-- 本地 -->
        <div class="model">
          <img src="../../assets/img/ceshi.jpeg" alt="" />
          <div class="storebottom">
            <span class="iconfont icon-xiazai-wenjianxiazai-14"></span>
            <span>本地</span>
            <span>350</span>
          </div>
        </div>
        <!-- 已购 -->
        <div class="model">
          <img src="../../assets/img/gongqi.gif" alt="" />
          <div class="storebottom">
            <span class="iconfont icon-yk_yuanquan"></span>
            <span>已购</span>
            <span>950</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 自建歌单 -->
    <div class="build">
      <div class="daytitle">
        <span>自建歌单 0</span>
      </div>
      <div class="addbox">
        <div class="add">
          <span class="iconfont icon-jiahao"></span>
          <span class="iconfont icon-yinlefuhao1"></span>

        </div>
        <div class="description">
          <span>创建歌单/导入歌单</span>
          <span>分享你的音乐品味</span>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import url(../../comman/css/center.css);
</style>
